<!-- StyleModal.vue -->
<template>
	<view v-if="show" class="modal">
		<view class="modal-content">
			<view class="title">选择图片</view>
			<scroll-view class="image-grid" scroll-y>
				<image v-for="image in images" :key="image" :src="image" :class="{ selected: image === selectedImage }"
					class="image" @click="selectImage(image)" />
			</scroll-view>
			<view class="button-container">
				<button @click="closeModal">取消</button>
				<button @click="confirmSelection">确定</button>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: Boolean
		},
		data() {
			return {
				images: [
					'../../static/images/mode/o1.png',
					'../../static/images/mode/o2.png',
					'../../static/images/mode/o3.png',
					'../../static/images/mode/o4.png',
					'../../static/images/mode/o5.png',
					'../../static/images/mode/o6.png',
					'../../static/images/mode/o7.png',
					'../../static/images/mode/o8.png',
					'../../static/images/mode/o9.png',
					'../../static/images/mode/o10.png',
					'../../static/images/mode/o11.png',
					'../../static/images/mode/o12.png',
				],
				selectedImage: ''
			};
		},
		methods: {
			selectImage(image) {
				this.selectedImage = image;
			},
			confirmSelection() {
				this.$emit('confirm', this.selectedImage);
				this.closeModal();
			},
			closeModal() {
				this.$emit('close');
			}
		}
	};
</script>

<style scoped>
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-content {
		background: #fff;
		padding: 20px;
		border-radius: 10px;
		width: 80%;
		max-height: 70%;
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.image-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		overflow-y: scroll;
		flex: 1;
		padding-bottom: 20px;
	}

	.image {
		width: 100px;
		height: 100px;
		margin: 10px;
		border: 2px solid transparent;
		cursor: pointer;
		background-color: transparent;
	}

	.image.selected {
		background-color: #007bff;
		border-color: #0056b3;
	}

	.button-container {
		height: 92rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	button {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		text-align: center;
		padding: 10px;
		background-color: #007bff;
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}

	button:hover {
		background-color: #0056b3;
	}
</style>